<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String inviteeMoney = request.getParameter("i");
    // 获取URL优惠金额参数
    request.setAttribute("inviteeMoney", inviteeMoney);
%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
    <meta http-equiv="expires" content="0">
    <%@include file="../common/base.jsp" %>
    <title>${appName} 新人福利</title>

    <%--<link rel="stylesheet" type="text/css" href="${base}/css/activity/main.css">--%>

    <style>
        div, p {
            font-size: 0;
        }
        body,
        p {
            font-family: PingFang-SC;
            margin: 0;
            padding: 0;
        }

        input,
        textarea,
        p{
            -webkit-appearance: none;
            /*清除输入框内阴影 在iOS上，输入框默认有内阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以使用下面方式关闭：*/
        }

        input:focus::-webkit-input-placeholder {
            /*input在获取焦点时 placeholder 没有隐藏*/
            opacity: 0;
        }

        .bg-box {
            height: 100%;
            overflow: hidden;
            width: 100%;
        }

        .home-bg {
            width: 100%;
            height: auto;
            display: block;
        }

        .container {
            min-height: 100vh;
            background: url(/activity/images/home_bk.png) no-repeat;
            background-size: cover;
        }

        .content-input {
            position: fixed;
            bottom: 0.2rem;
            width: 100%;
        }
        .btn-box {
            text-align: center;
            margin-bottom: 0.28rem;
        }

        .btn {
            display: inline-block;
            text-align: center;
            height: 0.44rem;
            line-height: 0.44rem;
            font-size: 16px;
            font-weight: 500;
            color: #fff;
            text-decoration: none;
        }

        .btn1 {
            background-color: #ffb600;
            border-radius: 0.25rem;
            -webkit-box-shadow: 0 0.07rem 0 0.03rem #ff6d00;
            -moz-box-shadow: 0 0.07rem 0 0.03rem #ff6d00;
            box-shadow: 0 0.07rem 0 0.03rem #ff6d00;
        }

        .btn1:active {
            -webkit-box-shadow: 0 0.07rem 0 0.03rem #ff6d00, 0 0.13rem 0 0.01rem #c14e00;
            -moz-box-shadow: 0 0.07rem 0 0.03rem #ff6d00, 0 0.13rem 0 0.01rem #c14e00;
            box-shadow: 0 0.07rem 0 0.03rem #ff6d00, 0 0.13rem 0 0.01rem #c14e00;
        }

        .btn-cont {
            height: 0.44rem;
            width: calc(100% - 1.08rem);
            padding: 0 0.24rem;
            border-radius: 0.22rem;
            margin: 0 0.3rem;
        }

        .dialog-content {
            top: 58% !important;
        }
        .btn2-cont {
            background-color: #FFB600;
        }

        .btn3-cont {
            background-image: url('../../activity/images/home_icon_Buttons3.png');
        }

        .input-box {
            margin: 0.16rem auto;
            text-align: center;
        }

        .input {
            height: 0.24rem;
            line-height: 0.24rem;
            border-radius: 0.22rem;
            width: calc(100% - 0.48rem);
            border: none;
            color: #232323;
            font-size: 16px;
            position: relative;
            padding: 0.1rem 0.24rem;
        }

        .input::-webkit-input-placeholder {
            color: #D5D5D9;
        }

        .input:-moz-placeholder {
            color: #D5D5D9;
        }

        .input::-moz-placeholder {
            color: #D5D5D9;
        }

        .input:-ms-input-placeholder {
            color: #D5D5D9;
        }

        .input-bg {
            margin: 0 auto;
            position: relative;
            margin: 0 0.3rem;
        }

        .input-bg:first-child {
           padding-bottom: 0.16rem;
        }

        .input1 {}

        .input2 {
        }

        .code-common {
            position: absolute;
            right: 10%;
            top: 50%;
            margin-top: -0.1rem;
            margin-right: -0.05rem;
            text-decoration: none;
            line-height: 0.2rem;
            z-index: 100;
        }

        .v-code {
            color: #FFB600;
            font-size: 12px;
        }

        .v-code-disabled {
            color: #D5D5D9;
            font-size: 12px;
        }

        .title {
            color: #fff;
            font-size: 16px;
            text-align: center;
        }

        .title .big {
            font-size: 20px;
        }

        .footer-p {
            text-align: center;
        }

        .footer-p a {
            color: #fff;
            font-size: 12px;
            text-decoration: none;
        }

        .footer-p>a {
            padding: 0 0.2rem;
        }

        .dialog-confirm {
            display: none;
            width: 100%;
            height: 3.2rem;
            position: fixed;
            top: 42%;
            margin-top: -1.6rem;
            z-index: 110;
        }

        .dialog-confirm .outer {
            position: relative;
            margin: 0.3rem;
            border: 2px solid #c14e00;
            background-color: #fff;
        }

        .dialog-confirm .inner {
            margin: 0.3rem;
            padding: 0.5rem 0.24rem 0.24rem 0.24rem;
            line-height: 0.28rem;
            border-radius: 0.08rem;
            background-color: #FFF;
        }

        #dialog104.dialog-confirm .inner,
        #successDialog.dialog-confirm .inner {
            padding: 1.1rem 0.24rem 0.24rem 0.24rem;
        }

        #declarationDialog.dialog-confirm .title2 {
            text-align: left;
            color: #232323;
        }

        #dialog104.dialog-confirm .get-gift-img-box,
        #successDialog.dialog-confirm .get-gift-img-box {
            top: 0.44rem;
            left: 50%;
            margin-left: -0.325rem;
        }
        .dialog-confirm .title1 {
            color: #232323;
            font-size: 18px;
            text-align: center;
            line-height: 0.4rem;
        }

        .dialog-confirm .title2 {
            color: #8C8C8C;
            font-size: 15px;
            line-height: 0.2rem;
            padding-bottom: 0.18rem;
            text-align: center;
        }
        .dialog-confirm .title2:last-child {
            padding-bottom: 0;
        }
        .dialog-confirm .btn {
            width: 100%;
        }

        .dialog-confirm .get-gift-img-box {
            position: absolute;
        }

        .get-gift-text-box {
            background-color: #FFB600;
            font-size: 18px;
            line-height: 0.4rem;
            border-radius: 20px;
            color: #FFF;
            width: 1.25rem;
            position: absolute;
            left: 50%;
            margin-left: -0.625rem;
            top: 0.2rem;
            text-align: center;
        }
        #dialog5.dialog-confirm .get-gift-img-box {
            top: -0.35rem;
        }

        .dialog-confirm .get-gift-img-box img {
            width: 0.75rem;
            height: 0.75rem;
        }

        .btn-close {
            position: absolute;
            right: 0.3rem;
            width: 0.25rem;
            height: 0.35rem;
            top: -0.05rem;
        }

        .btn-close img {
            width: 100%;
        }

        .mask {
            display: none;
            z-index: 105;
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        /**************************/
        .share-container .title .big {
            font-size: 24px;
            font-weight: 500;
        }

        .share-container .title {
            margin-bottom: 0.2rem;
        }

        .share-box {
            text-align: center;
        }

        .share-box .btn-share {
            display: inline-block;
            width: 0.6rem;
            margin-right: 0.1rem;
            text-decoration: none;
        }

        .share-box .btn-share img {
            width: 100%;
        }

        .rule-box {
            margin: 0.2rem;
        }

        .rule-box .rule {
            font-size: 13px;
            color: #fff;
            line-height: 0.25rem;
        }


        .nowrap {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .btn-default {
            border: 1px solid #4F5A67;
            color: #4F5A67;
        }

        .btn-default .btn {
            color: #4F5A67;
        }
        #declarationDialog .title2 {
            text-align: left;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="${base}/plugin/dialog/dialog.css">
</head>

<body style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;">
<div class="mask"></div>
<section style="" class="container">
    <header class="title" style="display: none;">
        <span>新用户注册即送</span>
        <span class="big">即送用车券</span>
    </header>
    <div class="content-input">
        <section class="input-box">
            <div class="input-bg">
                <input class="input input1" type="tel" name="telNum" id="telNum"
                       maxlength="11" placeholder="请输入手机号">
            </div>
            <div class="input-bg">
                <a id="btn_get_identifyCode" class="code-common v-code-disabled" href="javascript:;">获取验证码</a>
                <input class="input input2" type="number" name="identifyCode" oninput="if(value.length>6)value=value.slice(0,6)" id="identifyCode" placeholder="请输入验证码">
            </div>
        </section>
        <section class="btn-box">
            <div class="btn-cont btn2-cont">
                <a id="btn_get_gift" class="btn btn2" href="javascript:;" style="width: 100%;">马上注册</a>
            </div>
            <div style="display: none;" class="btn-cont btn3-cont">
                <a class="btn btn3" href="javascript:;">活动结束</a>
            </div>
        </section>
        <footer>
            <p class="footer-p">
                <a href="${appurl}" class="downloadApp">下载${appName}APP</a>
                <a href="javascript:;" id="declarationBtn">规则说明</a>
            </p>
        </footer>
    </div>
</section>

<!-- 第一个弹窗 -->
<section id="dialog103" class="dialog-confirm">
    <div class="btn-close btn_close">
        <img src="${base}/activity/images/icon_close.png">
    </div>
    <div class="inner" style="padding-top: 0.24rem">
        <p class="title1">您已接受过邀请，还未使用</p>
        <p class="title2">你已经领取过注册优惠券啦，快下载${appName}体验吧！</p>
        <div class="btn-cont btn2-cont">
            <a class="btn btn2 btn_close" href="javascript:;">我知道啦</a>
        </div>
    </div>
</section>
<!-- 第二个弹窗 -->
<section id="dialog102" class="dialog-confirm">
   <div class="btn-close btn_close">
       <img src="${base}/activity/images/icon_close.png">
   </div>
   <div class="inner" style="padding-top: 0.24rem">
       <p class="title1">温馨提示</p>
       <p class="title2">不能邀请自己哦！邀请朋友们一起使用${appName}！</p>
       <div class="btn-cont btn2-cont">
           <a class="btn btn2 btn_close" href="javascript:;">我知道啦</a>
       </div>
   </div>
</section>
<!-- 第二个弹窗 -->
<section id="dialog100" class="dialog-confirm">
   <div class="btn-close btn_close">
       <img src="${base}/activity/images/icon_close.png">
   </div>
   <div class="inner" style="padding-top: 0.24rem">
       <p class="title1">温馨提示</p>
       <p class="title2">请输入正确的手机号！</p>
       <div class="btn-cont btn2-cont">
           <a class="btn btn2 btn_close" href="javascript:;">我知道啦</a>
       </div>
   </div>
</section>
<!-- 第二个弹窗 -->
<section id="dialog101" class="dialog-confirm">
    <div class="btn-close btn_close">
        <img src="${base}/activity/images/icon_close.png">
    </div>
    <div class="inner" style="padding-top: 0.24rem">
        <p class="title1">温馨提示</p>
        <p class="title2">请输入正确的验证码！</p>
        <div class="btn-cont btn2-cont">
            <a class="btn btn2 btn_close" href="javascript:;">知道了</a>
        </div>
    </div>
</section>
<!-- 第三个弹窗 -->
<section id="dialog104" class="dialog-confirm">
    <div class="get-gift-img-box">
        <img src="${base}/activity/images/pic_defeated.png">
    </div>
    <div class="btn-close btn_close">
        <img src="${base}/activity/images/icon_close.png">
    </div>
    <div class="inner">
        <p class="title1">领取失败</p>
        <p class="title2" style="text-align: center">此为新人礼包，您已注册过，可登陆客户端参与更多的活动，谢谢！</p>
        <div class="btn-cont btn2-cont">
            <a class="btn btn2 btn_close" href="javascript:;">我知道啦</a>
        </div>
    </div>
</section>

<!-- 第四个弹窗 -->
<section id="successDialog" class="dialog-confirm" >
   <div class="get-gift-img-box">
       <img src="${base}/activity/images/congratulation.png">
   </div>
   <div class="btn-close btn_close">
       <img src="${base}/activity/images/icon_close.png">
   </div>
   <div class="inner">
       <%--<p class="title1">恭喜您获得${inviteeMoney}元优惠券</p>--%>
       <p class="title1">恭喜你注册成功</p>
       <p id="registerRemindInfo" class="title2" style="text-align: center">请赶快去下载使用吧!</p>
       <%--<p class="title2">恭喜你，你已经注册成功，请赶快去下载吧</p>--%>
       <div class="btn-cont btn2-cont" style="margin: 0.06rem 0 0rem 0;width: 82%">
           <a class="btn btn2 downloadApp" href="${appurl}">下载${appName}APP</a>
       </div>
       <%--<div class="btn-cont btn-default" style="width: 82%;margin: 0">--%>
           <%--<a class="btn btn2 btn_close" href="javascript:;">继续邀请好友</a>--%>
       <%--</div>--%>
   </div>
</section>

<!-- 第五个弹窗 -->
<section id="declarationDialog" class="dialog-confirm">
    <div class="get-gift-text-box">
        活动规则
    </div>
    <div class="btn-close btn_close">
        <img src="${base}/activity/images/icon_close.png">
    </div>
    <div class="inner">
        <p class="title2">1、分享专属链接给好友，邀请好友使用${appName}，高峰不加价，出行新选择。</p>
        <p class="title2">2、新用户通过邀请页面，输入手机号验证后，即可获得价值百元的的新人大礼包。</p>
        <p class="title2">3、您邀请的新用户注册${appName}APP,您可获得价值${inviteeMoney}元优惠券</p>
        <p class="title2">4、通过您的邀请链接注册的用户越多，您获得的奖励越多</p>
        <p class="title2">5、最终解释权归${appName}所有</p>
    </div>
</section>
<%--<!-- 第二个弹窗 -->--%>
<%--<section id="dialog107" class="dialog-confirm">--%>
    <%--<div class="outer">--%>
        <%--<div class="inner">--%>
            <%--<p class="title1">温馨提示</p>--%>
            <%--<p class="title2">3分钟内连续5次输入错误，请稍后再试哦!</p>--%>
            <%--<div class="btn-cont btn2-cont">--%>
                <%--<a class="btn btn2 btn_close" href="javascript:;">知道了</a>--%>
            <%--</div>--%>
        <%--</div>--%>
    <%--</div>--%>
<%--</section>--%>


</body>
<script type="text/javascript" src="${base}/js/flexible.js"></script>
<script type="text/javascript" src="${base}/js/activity/zepto.js"></script>
<script type="text/javascript" src="${base}/js/activity/zepto.fx.js"></script>
<script type="text/javascript" src="${base}/plugin/dialog/index.js"></script>
<script type="text/javascript" src="${base}/plugin/dialog/dialog.min.js"></script>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.6&key=6e7440e419e1a1953014ef4dda750fa3&plugin=AMap.CitySearch"></script>
<script type="text/javascript">
    var wheight = $(window).height();
    var wwidth = $(window).width();
    // var $bgImg = $('.home-bg').eq(0);
    var $mask = $('.mask').eq(0);
    var adcode = '';
    (function ($) {
        /*
         * 定位
         * 先浏览器定位，后采用IP定位
         * */
        function geolocation() {
            AMap.plugin('AMap.Geolocation', function () {
                var geolocation = new AMap.Geolocation({
                    // 是否使用高精度定位，默认：true
                    enableHighAccuracy: true,
                    // 设置定位超时时间，默认：无穷大
                    timeout: 10000,
                    // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                    buttonOffset: new AMap.Pixel(10, 20),
                    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    zoomToAccuracy: true,
                    //  定位按钮的排放位置,  RB表示右下
                    buttonPosition: 'RB'
                })

                geolocation.getCurrentPosition()
                AMap.event.addListener(geolocation, 'complete', onComplete)
                AMap.event.addListener(geolocation, 'error', onError)

                function onComplete(data) {
                    // data是具体的定位信息
                    adcode = data.addressComponent.adcode
                }

                function onError(data) {
                    // 定位出错
                    console.log(data)
//        citySearch()
                }
            })
        }

        function citySearch() {
            var citysearch = new AMap.CitySearch();
            //自动获取用户IP，返回当前城市
            citysearch.getLocalCity(function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    adcode = result.adcode;
                } else {

                }
            });
        }

        geolocation()

        // 马上领取
        $('#btn_get_gift').on('click', function (event) {
            var $this = $(this);
            // $this.prop("disabled", true);
            $.ajax({
                type:"post",    // 请求类型
                url:"${base}/h5/passenger/register",    // 请求URL
                data: {
                    areacode: adcode,
                    appid: '${param.appid}',
                    inviter: '${param.inviter}',
                    inviterType: '${param.inviterType}',
                    invitee: $("#telNum").val(),
                    shareUuid: '${param.shareUuid}',
                    identifyCode: $("#identifyCode").val()
                },
                dataType:"json",    // 数据返回类型
                success:function(result){    // 成功返回的结果(响应)
                    if (result.success) {
                        $("#registerRemindInfo").html(result.data.registerRemindInfo);
                        window.msgDialog = $("#successDialog");
                        window.msgDialog.show();
                        $mask.css("display", 'block');
                    } else {
                        switch (result.errCode) {
                            case 100: {
                                $('.container').dialog({
                                    type : 'notice',
                                    infoText: '手机号格式错误，请重新输入',
                                    autoClose: 2500,
                                    position: 'center'  // center: 居中; bottom: 底部
                                });
                                break
                            }
                            case 101: {
                                $('.container').dialog({
                                    type : 'notice',
                                    infoText: '验证码错误，请重新输入',
                                    autoClose: 2500,
                                    position: 'center'  // center: 居中; bottom: 底部
                                });
                                break
                            }
                            default: {
                                window.msgDialog = $("#dialog" + result.errCode);
                                window.msgDialog.show();
                                $mask.css("display", 'block');
                                break;
                            }
                        }
                    }
                },
                error: function (error) {
                    $('.container').dialog({
                        type : 'notice',
                        infoText: '网络异常，请检查网络状态后重试',
                        autoClose: 2500,
                        position: 'center'  // center: 居中; bottom: 底部
                    });
                    console.log(error)
                }
            });
        });

        // 规则说明
        $('#declarationBtn').on('click', function (event) {
            window.msgDialog = $("#declarationDialog");
            window.msgDialog.show();
            $mask.css("display", 'block');
        });

        // 知道了
        $('.btn_close').on('click', function (event) {
            window.msgDialog.hide();
            $mask.css("display", 'none');
        });

        // mask图层
        $mask.on('click', function (event) {
            window.msgDialog.hide();
            $(this).css("display", 'none');
        });

        $('#telNum').on('input', function() {
            if (!identifyPhonFun($("#telNum").val())) {
                $('#btn_get_identifyCode').addClass('v-code-disabled').removeClass('v-code')
                return
            }
            $('#btn_get_identifyCode').addClass('v-code').removeClass('v-code-disabled')
        })

         /**
          * 验证手机号
          * @param  {[string]} phone
          * @return {[boolean]}  false 不合法 ture 合法
          */
         function identifyPhonFun(phone) {
             if (phone) {
                 var rule = /^1(3|4|5|6|7|8|9)\d{9}$/;
                 var fig = rule.test(phone);
                 return fig;
             } else {
                 return false;
             }
         }

         function timeCount($this) {
             var t = 60;
             $this.text(t + 's').addClass('v-code-disabled').removeClass('v-code');
             var count = setInterval(timeDown, 1000);
             function timeDown() {
                 t--;
                 if (t > 0) {
                     $this.text(t + 's').addClass('v-code-disabled').removeClass('v-code');
                 } else {
                     clearInterval(count);
                     $this.text('重新获取').addClass('v-code').removeClass('v-code-disabled');
                 }
             }
         }
        //点击验证码按钮
        $('#btn_get_identifyCode').on('click', function (event) {
            var $this = $(this);
            var flag = $this.hasClass('v-code');
            if (flag) {
                if (!identifyPhonFun($("#telNum").val())) {
                    $('.container').dialog({
                        type : 'notice',
                        infoText: '手机号格式错误，请重新输入',
                        autoClose: 2500,
                        position: 'center'  // center: 居中; bottom: 底部
                    });
                    return
                }
                $.ajax({
                    type:"post",    // 请求类型
                    url:"${base}/h5/passenger/register/identifyCode/send",    // 请求URL
                    data: {
                      appid: '${param.appid}',
                      inviter: '${param.inviter}',
                      inviterType: '${param.inviterType}',
                      invitee: $("#telNum").val()
                    },
                    dataType:"json",    // 数据返回类型
                    success:function(result){    // 成功返回的结果(响应)
                        if (result.success) {
                           timeCount($this);
                          $('.container').dialog({
                            type : 'notice',
                            infoText: '验证码已发送，请注意查收',
                            autoClose: 2000,
                            position: 'center'  // center: 居中; bottom: 底部
                          });
                        } else {
                            switch (result.errCode) {
                                case 107: {
                                    $('.container').dialog({
                                        type : 'notice',
                                        infoText: '验证码获取次数频繁，请稍候再试',
                                        autoClose: 2500,
                                        position: 'center'  // center: 居中; bottom: 底部
                                    });
                                    break
                                }
                                default: {
                                    window.msgDialog = $("#dialog" + result.errCode);
                                    window.msgDialog.show();
                                    $mask.css("display", 'block');
                                    break
                                }
                            }
                        }
                    },
                    error: function (error) {
                        $('.container').dialog({
                            type : 'notice',
                            infoText: '网络异常，请检查网络状态后重试',
                            autoClose: 2500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                        console.log(error)
                    }
                });
            }
        });

    })(Zepto)

</script>

<script>
    (function () {
        var downloadapp = $(".downloadApp");
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;             //安卓
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);                         //IOS
        if (isAndroid) {
            downloadapp.attr("href", window.downloadApp.android)
        } else if (isIOS) {
            downloadapp.attr("href", window.downloadApp.ios)
            $("input").blur(function () {
              document.body.scrollTop = 0;
            });
        }
    })()

</script>

</html>